$(function(){
    // 模拟数据内容  这里为了为了方便使用了es6模板语法，不支持兼容ie9，请使用es5的拼接渲染方式

    // var dataBanners=[
    //     {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创1'},
    //     {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创2'},
    //     {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创3'},
    //     {data_banner:'https://media.w3.org/2010/05/sintel/trailer.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创4'},
    //     {data_banner:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4',img:'../static/images/dh-pace/video_banner2.png',txt:'国际黄金期货价格屡创4'}
    // ]

    // console.log(dataBanners);
    var banners_datas = ''
    $.each(dataBanners,function(v,m){
        // console.log(v,m.data_banner, 'aaaa');  
        //video-active 为选中效果
        banners_datas += `<div class="swiper-slide slide-video">
                                    <div class="video-banner"
                                        data-contentid='${dataBanners[v].contentid}'
                                        data-banner='${dataBanners[v].data_banner}'
                                        data-txt='${dataBanners[v].txt}'
                                        data-addtime='${dataBanners[v].data_addtime}'
                                        data-viewtimes='${dataBanners[v].data_viewtimes}'>
                                        <img src="${dataBanners[v].img}" alt="">
                                        <p>${dataBanners[v].txt}</p>
                                    </div>
                                </div>`
        
    })

    var aid = getQueryVariable('aid');
    // console.log(aid)
    if(aid == false){
        aid = 0;
    }
    // console.log(dataBanners[aid].data_banner);
    $('#videos').attr('src', dataBanners[aid].data_banner);
    $('#title').html(dataBanners[aid].txt);
    $('#addtime').html(dataBanners[aid].data_addtime);
    $('#viewtimes').html(dataBanners[aid].data_viewtimes);
    $("#videos")[0].play();

    /*增加观看量*/
    var contentid = dataBanners[aid].contentid;
    updatePreviewCount(contentid);

    $('.box-video').append(banners_datas)
    // video切换
    $('.video-banner').click(function () {
        $(this).addClass('video-active').parent().siblings().children().removeClass('video-active')
        var playurl = $(this).data('banner');
        var txt = $(this).data('txt');
        var addtime = $(this).data('addtime');
        var viewtimes = $(this).data('viewtimes');
        document.getElementById("videos").src = playurl;
        $('#title').html(txt);
        $('#addtime').html(addtime);
        $('#viewtimes').html(viewtimes);
        $("#videos")[0].play();

        /*增加观看量*/
        var contentid = $(this).data('contentid');
        updatePreviewCount(contentid);

    })


    // 点击获取当前下标
    $('.swiper-slide').click(function(){
        var i =$(this).index()
          changeURLParam('aid', i)
      })
    // 获取自定义属性

    var mySwipersVideo = new Swiper('.swiper-videos', {
        // autoplay: 5000,//可选选项，自动滑动
        // loop: true,//可选选项，开启循环
                // 渲染数据的时候，如果真实接口出不来数据，请把swiper的js都放到请求里面，开启下面swiepr初始化
    // observer:true,//修改swiper自己或子元素时，自动初始化swiper
    //     observeParents:true,//修改swiper的父元素时，自动初始化swiper
        paginationClickable: true,
        slidesPerView: 4,
        // onInit: function (mySwipersVideo) {
        //     mySwipersVideo.swipeNext()
        // }
    })
    // 点击左右swiper按钮
    $('#btnVideo1').click(function () {
        mySwipersVideo.swipePrev();
        
        
    })
    $('#btnVideo2').click(function () {
        mySwipersVideo.swipeNext();
    })

     //切换效果
    $('.zs-tabs>p').click(function () {
        $(this).addClass('zs-acitve').siblings().removeClass('zs-acitve')
        $('.tabs1-active').eq($(this).index()).show().siblings().hide()
    })

    // 实现无刷新动态添加url地址
function changeURLParam(name, value) {
    var url = document.URL, resultUrl = ''
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg);
    var replaceText = name + '=' + value;
    if (r != null) {
        var tmp = url.replace(unescape(name + '=' + r[2]), replaceText);
        resultUrl = (tmp);
    } else {
        if (url.match('[\?]')) {
         resultUrl = url + '&' + replaceText;
        }
        else {
         resultUrl = url + '?' + replaceText;
        }
    }
    history.replaceState(null, null, resultUrl)
 }
})


/*获取地址栏参数*/
function getQueryVariable(variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}

/*增加观看量*/
function updatePreviewCount($id){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: "/content/update-preview-count?id=" + $id,
        success: function(data){
            // console.log(data)
            if(data.code == 0){
                console.log('ok');
            }

        },
        error: function(){
      
        }
    })
}